<template>
  <div>
    <div class="shopbox" v-for="(item,index) in list" :key="`1-${index}`" v-if="item.list.length!=0">
      <div class="shoptitl">
        <yd-checkbox
          shape="circle"
          :value="item.checked.length === item.list.length"
          @change.native="handleCheckAll(item)"
          color="#F00">
        </yd-checkbox>
        <div class="shopdainpuimg">
          <img src="../assets/product/shangdian.png" alt="">
        </div>
        <div class="shoptidianm">{{item.shop_name}}</div>
      </div>
      <yd-checkbox-group v-model="item.checked" color="#F00">
        <div
          class="shopbotbox"
          v-for="(son,index) in item.list"
          :key="index">
          <yd-checkbox :val="son.id" :key="son.id" shape="circle" color="#F00">&nbsp;</yd-checkbox>
          <div class="shopimg">
            <img :src="son.thumb" alt="">
          </div>
          <div class="shoprig">
            <div class="diesx"><div>{{son.title}}</div> <span  @click="onDel(son.id)"><img src="../assets/order_center/sanchu1.png" alt=""> </span></div>
            <div class="shoprigti">{{son.spec}}</div>
            <div class="shopbot">
              <div v-if="son.is_shoppingmall_auth == 0">￥{{parseFloat(son.price)}}+{{son.redbag_num}}鸿包</div>
              <div v-if="son.is_shoppingmall_auth == 1">￥{{parseFloat(son.price)}}送{{son.welfare_price}}鸿包</div>
              <div v-if="son.is_shoppingmall_auth == 2">{{son.redbag_num}}鸿包</div>
              <div v-if="son.is_shoppingmall_auth == 3">￥{{parseFloat(son.price)}}</div>
              <div class="nums">
                <div  @click="son.count>1?son.count--:''">-</div>
                <div>{{son.count}}</div>
                <div @click="son.count<100?son.count++:''">+</div>
              </div>
            </div>
          </div>
        </div>
      </yd-checkbox-group>
    </div>
    <div style="height:1rem;">

    </div>
     <div class="without" v-if="list.length == 1&& list[0].list==''">
          <img src="../assets/order_center/kongbai.png" alt="">
          <span>暂无数据</span>
      </div>
    <div style="height:1rem;"></div>
    <div class="shopfooter">
      <div class="shopfotleft">
        <div class="leftleft">
          <yd-checkbox v-model="allCheck" shape="circle" color="#F00" @change.native="handleCheckAllShop"></yd-checkbox>
          <div class="shoptidianm">全选</div>
        </div>
        <div class="shopfothj" style="word-break:normal ">
         <span> 合计：
          ￥{{total + (redbag_num > 0 ?  `+${redbag_num}鸿包` : '') + (welfare_price > 0 ? `送${welfare_price}鸿包` : '')}}</span>
          <!-- <span>￥{{total + (redbag_num > 0 ?  '加'+redbag_num+'鸿包' : '') + (welfare_price > 0 ? `送${welfare_price}鸿包` : '')}}</span> -->
          <!-- <span>
            {{total}} {{(redbag_num > 0 ?  `+${redbag_num}鸿包` : '')}}
            {{(welfare_price > 0 ? `送${welfare_price}鸿包` : '')}}
          </span> -->
        </div>
      </div>
      <div class="shopfotright" @click="shopaccounts()">结算</div>
    </div>
        <!-- 底部 -->
    <div class="tabbarWarp">
      <yd-tabbar class="cy_tabbar" fixed active-color="#e63f3f" color="#999" >
        <yd-tabbar-item title="首页" link="/">
          <img slot="icon" src="../assets/index/home-hui.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="分类" link="/classify">
          <img slot="icon" src="../assets/index/classify-hui.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="附近" link="/nearby">
          <img slot="icon" src="../assets/index/nearby-hui.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="购物车" link="/information" active>
          <img slot="icon" src="../assets/index/information.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="我的" link="/mine">
           <img slot="icon" src="../assets/index/mine-hui.png">
        </yd-tabbar-item>
      </yd-tabbar>
    </div>
  </div>
</template>
<script>
  import Vue from "vue";
  import {CheckBox, CheckBoxGroup} from "vue-ydui/dist/lib.rem/checkbox";
  Vue.component(CheckBox.name, CheckBox);
  Vue.component(CheckBoxGroup.name, CheckBoxGroup);
  import {Popup} from "vue-ydui/dist/lib.rem/popup";
  Vue.component(Popup.name, Popup);
  export default {
    name: "shoppcart",
    data() {
      return {
        show: false,
        spinner: 1,
        list: [],
        total: 0,
        // 消耗鸿包
        redbag_num: 0,
        // 送的鸿包
        welfare_price: 0,
        // 全选
        allCheck: false
      };
    },
    methods: {
      // 选中全部
      handleCheckAll(item) { 
        item.checked = item.checked.length === item.list.length ? [] : item.list.map(item => item.id)
      },
      handleCheckAllShop() {
        const list = JSON.parse(JSON.stringify(this.list))
        this.list = list.map(item => {
          return {
            ...item,
            // 判断当前shop和是否当前选中
            isAllChecked: !this.allCheck ? true : false,
            checked: !this.allCheck ? item.list.map(item => item.id) : []
          }
        })
      },
      back() {
        this.$router.go(-1);
      },
      gouwuche() {
        let self = this;
        let url = '/api/shopping/cartInfo';
        self.httpPost(url, {user_id: self.user_id, token: self.token}, function (res) {
          if (res.code == 200) {
                self.list = res.data.map(item => { 
                    return {
                      ...item,
                      checked: [],
                      isAllChecked: false,
                    }  
                });
          }
        })
      },
      shopaccounts() { 
        const list = JSON.parse(JSON.stringify(this.list))
        const data = list.map(item => {
          return {
            shop_name:item.shop_name,
            list: (item.checked || []).map(id => {
              return item.list.find(item1 => item1.id === id)
            })
          }
        })
        console.log("11",data)
        let totals = parseInt(this.total);
        if(this.total==0.00&&this.redbag_num==0){
			  	this.$dialog.toast({mes:"请选择商品"});
          return
        } 
        localStorage.setItem('carDataInfo', JSON.stringify(data))
        this.$router.push("/shopaccountsCar"); 
      },
      //删除
      onDel(id){
        let self = this;
        this.$dialog.confirm({
            title: '是否删除？',
            mes: '',
            opts: () => {
                let url = '/api/goods/delGoods';
                self.httpPost(url, {user_id: self.user_id, token: self.token,cart_goods_id:id}, function (res) {
                  if (res.code == 200) {
                    self.gouwuche()
                    self.$dialog.toast({mes:res.msg});
                  }else{
                    self.$dialog.toast({mes:res.msg});
                  }
                })
            }
        });
      }
    },
    created() {
      document.title = "购物车"
      this.user_id = localStorage.getItem('myid');
      this.token = localStorage.getItem('mytoken');
      this.gouwuche()
    },
    // 监听
    watch: {
      list: {
        deep: true,
        handler(val) {
          if (!val && val.length) return
          let redbag_num = 0
          let welfare_price = 0
          const tmpNum = val.reduce((total, item) => {
            let num = 0
            if (item.checked && item.checked.length) {
              num = item.checked.reduce((total, subItem) => {
                const list = item.list || []
                const goods = list.find(item1 => subItem === item1.id) || {}
                redbag_num += Number((goods.redbag_num * goods.count) || 0)
                welfare_price +=  Number((goods.welfare_price * goods.count) || 0)
                return total + Number((goods.price * goods.count) || 0)
              }, 0)
            }
            return total + num
          }, 0)
          this.redbag_num = redbag_num
          this.welfare_price = welfare_price
          this.total = tmpNum.toFixed(2)
        }
      }
    }
  };
</script>
<style>


.tabbarWarp {
  width: 100%;
  border-top: 1px solid #cccccc;
  position: fixed;
  bottom: 0;
}
.cy_tabbar {
  font-size: 0.3rem;
}
.yd-tabbar-icon img {
  width: 0.5rem;
}
.top_tab {
  width: 100%;
  position: fixed;
  padding: 0.2rem 0.3rem;
  background: #e63f3f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
}
.top_tab span {
  color: #fff;
  font-size: 0.3rem;
  /* margin-left: 0.25rem; */

}
.top_tab img {
  width: 0.46rem;
}
.imfnavli {
  padding-top: 1rem;
}
  .top_tab1 {
    width: 100%;
    padding: 0.2rem 0.3rem;
    background: #fff;
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0.01rem 0.01rem 0.06rem #ddd;
  }

  .top_tab1 span {
    color: #333;
    font-size: 0.36rem;
    padding-left: 0.8rem;
  }

  .top_tab1 .right1 {
    width: 1rem;
    display: flex;
    justify-content: space-between;
  }

  .top_tab1 img {
    width: 0.43rem;
  }

  .n {
    height: 0.9rem;
  }

  .shopbox {
    background: #fff;
  }

  .shoptitl {
    width: 90%;
    height: 1rem;
    line-height: 0.75rem;
    margin: 0 auto;
    border-bottom: 1px solid #ddd;
    display: flex;
  }

  .shopdainpuimg {
    line-height: 1.3rem;
    margin: 0 0.1rem 0 0rem;
  }

  .shoptidianm {
    line-height: 1.05rem;
    font-size: 0.3rem;
    color: #999;
    margin-right: 2px;
  }

  .shopbotbox {
    width: 90%;
    margin: 0 auto;
    height: 2.26rem;
    line-height: 1rem;
    padding: 0.3rem 0;
    display: flex;
    justify-content: space-between;
  }

  .shopimg {
    width: 26%;
    height: 1.6rem;
  }

  .shopimg img {
    width: 100%;
    height: 100%;
  }

  .shoprig {
    width: 55%;
    display: flex;
    flex-direction: column;
    font-size: 0.26rem;
    line-height: 1.8;
    justify-content: space-between;
  }

  .shopbot {
    display: flex;
    justify-content: space-between;
    color: #eb6767;
  }

  .shopfoot {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 2;
    background: #fff;
  }

  .shopshjiag {
    width: 90%;
    height: 1.75rem;
    text-align: center;
    margin: 0 auto;
    line-height: 1.75rem;
    font-size: 0.45rem;
    color: #eb6767;
    border-bottom: 1px solid #ddd;
  }

  .shopfooter {
    width: 100%;
    height: 1rem;
    /* line-height: 0.7rem; */
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 1rem;
    background: #fff;
    border-top: 1px solid #ddd;
    padding-left: 5%;
    z-index: 99;
  }

  .shopfotleft {
    width: 65%;
    display: flex;
    justify-content: space-between;
  }

  .leftleft {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  .shopfothj {
    /* line-height: 1rem; */
    font-size: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .shopfothj span {
    color: #f00;
  }

  .shopfotright {
    width: 30%;
    text-align: center;
    line-height: 1rem;
    background: #e63f3f;
    color: #fff;
    font-size: 0.3rem;
  }

  .shoprigti {
    font-size: 0.24rem;
    color: #666;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .diesx{
    overflow: hidden;
  }
  .diesx>div{
    float: left;
    text-overflow: ellipsis;
    width: 86%;
    white-space: nowrap;
    overflow: hidden;
  }
  .diesx span{
    float: right;
  }
  .diesx span img{
    width: 20px;
  }


  .nums {
    display: flex;
    align-items: center;

  }

  .nums > div {
    width: .45rem;
    height: .45rem;
    text-align: center;
    line-height: .42rem;
  }

  .nums div:nth-child(1) {
    border-radius: 100%;
    border: 1px solid #eb6767;
  }

  .nums div:nth-child(3) {
    background: #eb6767;
    color: #fff;
    border-radius: 100%;
  }
</style>
<style>
  .yd-checkbox-text {
    display: none;

  }

  .shopbotbox .yd-checkbox {
    line-height: 1rem;
    padding-right: 0 !important;
  }

  .shopbotjiajian .yd-spinner > input {
    color: #ed7e7e;
  }

  .yd-spinner-circle > span > i:after {
    top: 40%;
    left: 45%;
  }

  .shopbotjiajian .yd-spinner > span:last-child > i:after {
    color: #e84e4e;
  }

  .shopbotjiajian .yd-spinner-circle > span:last-child {
    background: #f7c5c5;
  }

  .shopbotjiajian2 .yd-spinner > input {
    color: #ed7e7e;
  }

  .shopbotjiajian2 .yd-spinner > span > i:after {
    color: #e84e4e;
  }

  .shopbotjiajian2 .yd-spinner-circle > span {
    background: #f7c5c5;
  }

  .yd-mask {
    z-index: 1;
  }
</style>


